<template>
  <div class="box">
    <!-- 头部 -->
    <p class="p"></p>

    <div class="heard">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="工单编号:">
    <el-input v-model="formInline.user" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="工单状态">
    <el-select v-model="formInline.region" placeholder="请选择">
      <el-option label="代办" value="daiban"></el-option>
      <el-option label="进行" value="jinxing"></el-option>
      <el-option label="取消" value="quxiao"></el-option>
      <el-option label="完成" value="wancheng"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
</div>

   <div class="neirong">
     <div class="buttonAnNiu">
      <el-row>
     <el-button type="warning" @click="open">新建</el-button>
     <el-button type="danger">工单配置</el-button>
     </el-row>
     </div>

     <div class="biaoge">
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              fixed
             type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="taskCode"
              label="工单编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="innerCode"
              label="设备编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="taskType[typeName]"
              label="工单类型"
              width="180">
            </el-table-column>
            <el-table-column
              prop="createType"
              label="工单方式"
              width="180">
            </el-table-column>
            <el-table-column
              prop="taskStatusTypeEntity[statusName]"
              label="工单状态"
              width="180">
            </el-table-column>
              <el-table-column
              prop="userName"
              label="运营人员"
              width="180">
            </el-table-column>
              <el-table-column
              prop="createTime"
              label="创建日期"
              width="180">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="150">
      <template slot-scope="scope">
<!--
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button> -->

      <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
      <!-- <el-button type="text" size="small">编辑</el-button> -->

      </template>
    </el-table-column>
  </el-table>
     </div>

    <div class="fyq">

       <div class="block">
         <div><span>共{{totalCount}}条记录</span> <span>第 1/97 页</span></div>
    <el-pagination
      background
      @size-change="getBussList"
      @current-change="getBussList"
      :current-page.sync="params.page"
      :page-sizes="[5,10,15,20]"
      :page-size.sync="params.size"
      layout=" prev, pager, next,sizes"
      :total="totalCount">
    </el-pagination>
  </div>

    </div>

   </div>

  </div>
</template>

<script>
import { getBussList, getTaskStatus } from '@/api/user'
export default {
  name: 'WeWr',
  computed: {
  },
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      params: {
        page: 1,
        size: 10
      },
      // createType: '',
      totalCount: 0,
      totalPage: 0,
      tableData: [],
      currentPage: 5,
      statusName: ''
    }
  },

  mounted () {
  },
  created () {
    this.getBussList()
    this.getTaskStatus()
  },
  methods: {
    // 获取列表信息
    async getBussList () {
      const res = await getBussList(this.params)
      // console.log(res)
      this.tableData = res.currentPageRecords
      // console.log(this.tableData)
      // 处理方式
      this.tableData.forEach(ele => {
        if (ele.createType === 0) {
          ele.createType = '自动'
        } else {
          ele.createType = '手动'
        }
      })
      this.totalCount = +res.totalCount
      this.totalPage = +res.totalPage
    },
    // 获取状态信息
    async getTaskStatus () {
      const res = await getTaskStatus()
      // console.log(res)
      this.tableData.forEach(ele => {
        if (ele.statusId === 1) {
          this.statusName = res.statusName
          // this.tableData = [...this.tableData, this.statusName]
        } else if (ele.statusId === 2) {
          this.statusName = res.statusName
          // this.tableData = [...this.tableData, this.statusName]
        } else if (ele.statusId === 3) {
          this.statusName = res.statusName
          // this.tableData = [...this.tableData, this.statusName]
        } else {
          this.statusName = res.statusName
          // this.tableData = [...this.tableData, this.statusName]
        }
        return this.tableData
      })
      // console.log(this.tableData)
    },
    onSubmit () {
      console.log('submit!')
    },

    deleteRow (index, rows) {
      rows.splice(index, 1)
    },

    handleClick (row) {
      console.log(row)
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },

    open () {
      this.$confirm('内容', '新增工单', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '新增成功'
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '已取消'
              : '停留在当前页面'
          })
        })
    }
  }
}

</script>

<style lang="scss" scoped>
   .box{

    height: 500px;
    margin:-35px;
     background-color: #f8fafd;
      .p{
        height: 10px;
      }

     .heard{
      background-color: #fff;
      margin: 0 30px;
       padding-top: 20px;
      ::v-deep .el-form--inline .el-form-item__label{
        margin-left: 20px;
       }
     }

      .neirong{
        background-color: #fff;
        margin: 20px 30px;
        padding: 20px;
         .el-button--warning{
        background-color: #ff8c3c;
     }
     .el-button + .el-button{
      background-color: #fbf4f0;
      border: 0 ;
   ::v-deep span{
          color: #655b78;
        }
     }
      }
   }

</style>
